<template>
  <!-- 弹窗 -->
  <div class="alarmWindowBox flex-center">
    <div class="alarmBox flexColumn animation1">
      <div class="alarmTitle flex-align-center">
        <span class="alarmTitleName">
          <i class="el-icon-bell" style="color: #ffffff;marginRight: 10px"></i>当前警报事件
        </span>
        <span class="closeBox flex-center finger" @click="ClickisShow()">
          <i class="el-icon-close" style="color: #ff0000"></i>
        </span>
      </div>
      <div class="flex1 alarmContentBox flex">
        <div class="leftBox flexColumn">
          <span class="font18">报警时间：</span>
          <span class="color-fullRed font16 mb20">2021-8-21 8:30:12</span>
          <span class="font18">报警类型：</span>
          <span class="color-fullRed font16 mb20">SMT检测异常</span>
          <span class="font18">报警事件：</span>
          <span class="color-fullRed font16 mb20">焊点不良</span>
          <span class="font18">报警事件危机等级：</span>
          <span class="color-fullRed font16 mb20">高危</span>
          <span class="font18">备注：</span>
          <span class="color-fullRed font16 mb20">制程异常-SMT-AOI</span>
        </div>
        <div class="rightBox">
          <!-- <HlsVideo :src="'http://192.168.12.16:80/rtsp/D277C65B/hls.m3u8'"></HlsVideo> -->
          <div class="topBox flex">
            <div
              v-for="(item, index) in alarmInfoList"
              :key="'alarmInfoList' + index"
              class="itemBox flex"
            >
              <div class="left flexColumn">
                <img
                  class="dubleHeight"
                  :src="require('../../../../assets/icons/' + backIconName(index) +'.png')"
                />
                <img
                  :src="require('../../../../assets/icons/' + (item.status ? 'grayClock' : 'redClock') + '.png')"
                />
                <img
                  :src="require('../../../../assets/icons/' + (item.status ? 'blueRight' : 'grayRight') + '.png')"
                />
              </div>
              <div class="right flexColumn">
                <div class="righttopBox">
                  <div class="flex-align-center color-fullRed">
                    <img style="marginRight: 5px" src="../../../../assets/icons/redClock.png" />
                    {{ item.time }}
                  </div>
                  {{ item.title }}
                </div>
                <span :class="item.status ? 'color-gray' : 'color-fullRed'">待确认</span>
                <span :class="item.status ? 'color-blue' : 'color-gray'">已确认</span>
                <span>{{ item.title2 }}</span>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
          <!-- 赶时间写死 -->
          <div class="bottomBox flex">
            <div class="itemBox flexColumn flex-align-center">
              <img src="../../../../assets/icons/person2.png" />
              <span class="itemTitle">SMT1 IPQC组长</span>
              <span>
                2021-08-11 09:01:00
                <img src="../../../../assets/icons/blueRight.png" />
              </span>
              <span class="itemTitle">SMT1 IPQC领班</span>
              <span>
                2021-08-11 09:01:00
                <img src="../../../../assets/icons/blueRight.png" />
              </span>
              <span class="itemTitle">SMT1 IPQC组长</span>
              <span>
                2021-08-11 09:01:00
                <img src="../../../../assets/icons/blueRight.png" />
              </span>
            </div>
            <div class="itemBox flexColumn flex-align-center">
              <img src="../../../../assets/icons/person3.png" />
              <span class="itemTitle">SMT1 IPQC组长</span>
              <span>
                2021-08-11 09:01:00
                <img src="../../../../assets/icons/blueRight.png" />
              </span>
              <span class="itemTitle">SMT1 IPQC领班</span>
              <span>
                2021-08-11 09:01:00
                <img src="../../../../assets/icons/blueRight.png" />
              </span>
            </div>
            <div class="itemBox flexColumn flex-align-center">
              <img src="../../../../assets/icons/person4.png" />
              <span class="itemRedTitle">总经理</span>
              <span class="itemRedTitle">副总经理</span>
              <span class="itemTitle">常务副总</span>
              <span>
                2021-08-11 09:01:00
                <img src="../../../../assets/icons/blueRight.png" />
              </span>
              <span class="itemTitle">厂长</span>
              <span>
                2021-08-11 09:01:00
                <img src="../../../../assets/icons/blueRight.png" />
              </span>
            </div>
            <div class="progressBg">
              <img src="../../../../assets/icons/progressBg.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'runborder',
  data() {
    return {
      isShow: false,
      alarmInfoList: [
        {
          time: '15:00',
          title: '责任方',
          status: 1,
          title2: 'SMT1线-工人',
          name: '廖勇强',
        },
        {
          time: '30:00',
          title: '临时整改措施',
          status: 1,
          title2: '临时预备方案',
          name: 'A、B、C...',
        },
        {
          time: '08:00:00',
          title: '长期处理对策',
          status: 0,
          title2: '设置稳定的风险防控措施',
          name: ' A、B...',
        },
      ],
    }
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    backIconName(index) {
      switch (index) {
        case 0:
          return 'person1'
        case 1:
          return 'schedule'
        case 2:
          return 'calendar'
      }
    },
    ClickisShow() {
      this.$emit('parentMethod', this.isShow)
    },
  },
}
</script>

<style lang="less" scopted>
.alarmWindowBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  .alarmBox {
    position: absolute;
    // width: 1260px;
    // height: 583px;
    overflow: hidden;
    .alarmTitle {
      height: 40px;
      justify-content: space-between;
      color: white;
      font-size: 18px;
      .alarmTitleName {
        text-indent: 20px;
        line-height: 40px;
        height: 100%;
        width: 250px;
        background: linear-gradient(-135deg, transparent 30px, red 0) top right;
      }
      .closeBox {
        height: 24px;
        width: 24px;
        border: red 1px solid;
      }
    }
    .alarmContentBox {
      background-color: black;
      overflow: hidden;
      border-bottom: 1px solid red;
      border-top: 1px solid red;
      .leftBox {
        height: 100%;
        width: 300px;
        padding: 20px;
        box-sizing: border-box;
        color: white;
      }
      .rightBox {
        height: 100%;
        width: 960px;
        .topBox {
          height: 40%;
          .itemBox {
            padding-top: 20px;
            width: 33.33%;

            .left {
              flex: 1;
              padding: 5px;
              align-items: flex-end;
              .dubleHeight {
                width: 46px;
                height: 46px;
              }
              img {
                width: 20px;
                margin-bottom: 6px;
              }
            }
            .right {
              color: white;
              flex: 2;
              padding: 5px;
              font-size: 16px;
              .righttopBox {
                img {
                  height: 16px;
                }
                height: 46px;
                margin-bottom: 6px;
              }
              span {
                font-size: 14px;
                height: 20px;
                margin-bottom: 6px;
              }
            }
          }
        }
        .bottomBox {
          height: 60%;
          background-color: white;
          padding-top: 20px;
          position: relative;
          .progressBg {
            position: absolute;
            top: 53px;
            left: 143px;
            width: 70%;
            height: 30px;
            img {
              height: 100%;
              width: 100%;
            }
          }
          .itemBox {
            flex: 1;
            z-index: 3;
            span {
              text-align: center;
              height: 24px;
              line-height: 24px;
              img {
                height: 14px;
                margin-left: 6px;
              }
            }
            .itemRedTitle {
              width: 120px;
              color: red;
              border: 1px solid red;
              border-radius: 4px;
              margin-top: 6px;
            }
            .itemTitle {
              padding: 0 10px;
              background-color: #494755;
              color: white;
              margin-top: 6px;
              border-radius: 4px;
            }
          }
        }
      }
      // width: 960px;
      // max-height: 540px;
    }
  }
}
</style>